<template>
  <div>
    <el-container>
      <el-main>
        <!-- <div v-html="info.proName" class="info-proName"></div>
        <div class="info-title">活动简介</div> -->
        <div v-html="info.title" class="ql-editor info-content"></div>
        <el-row>
          <el-col :span="24" class="info-title">相关附件</el-col>
        </el-row>
        <el-row
          v-for="(item, index) in info.informations"
          :key="'infomation' + index"
          class="information-list"
        >
          <el-col :span="18">{{ item.name }}</el-col>
          <el-button
            :span="3"
            link
            type="primary"
            icon="Download"
            @click="download(item)"
            >下载</el-button
          >

          <el-button
            :span="3"
            link
            type="primary"
            icon="Reading"
            @click="preview(item)"
            >在线预览</el-button
          >
        </el-row>
      </el-main>
      <el-aside width="400px">
        <div class="info-title">活动时间</div>
        <div>{{ info.startTime }} - {{ info.endTime }}</div>
        <div class="info-title">活动阶段</div>
        <div v-for="(item, index) in info.stageList" :key="index">
          <div class="task-title">{{ item.name }}</div>
          <div class="task-time">{{ item.timeInterval }}</div>
        </div>
      </el-aside>
    </el-container>
  </div>
  <PreviewDialog v-model="dialogVisible" :infor="currentInfor"></PreviewDialog>
</template>
<script setup name="ProjectDetail">
import PreviewDialog from "./previewDialog.vue";
import { ref } from "vue";
import { getProjectInfo } from "@/api/home/home";
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const route = useRoute();
const router = useRouter();
const info = ref({});
const currentInfor = ref({});
const props = defineProps({
  projectId: {
    type: String,
  },
});

function getInfo() {
  getProjectInfo({ id: props.projectId }).then((res) => {
    info.value = res.data;
  });
}
/** 下载文件 */
function download(item) {
  proxy.download(
    "/common/download",
    {
      fileName: item.url.replace("/profile/upload", ""),
      delete: false,
    },
    item.name
  );
}
//打开在线预览弹窗
function preview(item) {
  currentInfor.value = item;
  dialogVisible.value = true;
}
onMounted(() => {
  getInfo();
});
</script>
<style lang="scss" scoped>
.info-proName {
  font-weight: bold;
}
.info-title {
  margin: 20px 0;
  border-left: 3px solid rgb(64, 158, 255);
  padding: 0 10px;
}
.task-title {
  font-weight: bold;
  padding: 10px 0;
}
.task-time {
  color: rgb(112, 112, 112);
}
.info-content {
  white-space: pre-wrap;
  :deep(p){
    margin: 25px 0;
  }
}
.information-list {
  font-size: 14px;
  margin: 10px 0;
}
</style>